<template>
  <div class="login-container">
    <div class="login-box">
      <!-- 头像 -->
      <div class="avatar-box">
        <img src="../assets/Blog.png" />
      </div>
      <h1>注册</h1>
      <!-- 登录表单 -->
      <el-form :model="loginForm" :rules="loginFormRules" ref="ruleFormRef" label-width="0" class="login-form">
        <!-- 用户名 -->
        <el-form-item prop="username">
          <el-input v-model="loginForm.username" placeholder="请输入用户名" prefix-icon="iconfont icon-zuozhe"></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input v-model="loginForm.password" placeholder="请输入密码" prefix-icon="iconfont icon-suo" show-password></el-input>
        </el-form-item>
        <!-- y邮箱 -->
        <el-form-item prop="email">
          <el-input v-model="loginForm.email" placeholder="请输入邮箱" prefix-icon="iconfont icon-youxiang"></el-input>
        </el-form-item>
        <!-- 按钮 -->
        <el-form-item class="btns">
          <el-button type="primary" @click="register">注册</el-button>
          <el-button type="info" @click="login">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    // 自定义邮箱规则
    var checkEmail = (rule, value, callback) => {
      // 验证邮箱的正则表达式
      const regEmail = /^\w+@\w+(\.\w+)+$/
      if (regEmail.test(value)) {
        // 合法邮箱
        return callback()
      }
      callback(new Error('请输入合法邮箱'))
    }
    return {
      // 登录数据表单对象
      loginForm: {
        username: '',
        password: '',
        email: ''
      },
      // 表单的验证对象
      loginFormRules: {
        // 验证用户名是否合法
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        // 验证密码是否合法
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 12, message: '长度在 6 到 12个字符', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { validator: checkEmail, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    login() {
      this.$router.push('/login')
    },
    // 注册
    register() {
      this.$refs.ruleFormRef.validate(valid => {
        if (!valid) {
          return false
        }
        // 发起登录请求
        this.$http.post('sys/sign', this.loginForm).then(res => {
          console.log(res.data)
          if (res.data.code !== 200) {
            return this.$message.error('用户名或邮箱已经存在！')
          }
          console.log('-------------注册成功-------------')
          this.$message.success('注册成功！')
          this.$router.push('/login')
        })
      })
    }
  }
}
</script>
<style lang="less" scoped>
.login-container {
  background-color: #a6f0c6;
  height: 100%;
}
.login-box {
  width: 370px;
  height: 420px;
  // padding:20px;
  background-color: #fff;
  border-radius: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  .avatar-box {
    height: 120px;
    width: 120px;
    border: 1px solid #eee;
    border-radius: 50%;
    box-shadow: 0 0 10px #ddd;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 10px;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      transition: 1s all ease;
    }
  }
  h1 {
    position: absolute;
    top: 32%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #303643;
  }
  .avatar-box img:hover {
    transform: rotate(360deg);
  }
  .btns {
    display: flex;
    justify-content: flex-end;
  }
  input{
    line-height: 20px;
  }
  .login-form {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }
}
</style>
